Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-social-sharing

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-social-sharing

A Vue.js component for sharing links to social networks

  • 2.4.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
decreased by-63.89%
Maintainers
1
Weekly downloads
 
Created
Source

Vue Social Sharing

Release Build Status Coverage Status Downloads License Vue 1 Vue 2


For Vue.js prior to < V2 use vue-social-sharing v0.x
For SSR and Vue.js 2 support use vue-social-sharing v2.x

Demo

Installation

# Yarn
yarn add vue-social-sharing

# NPM
npm install --save vue-social-sharing

# Bower
bower install vue-social-sharing

Usage

Loading the library

Browserify / Webpack
var SocialSharing = require('vue-social-sharing');

Vue.use(SocialSharing);
HTML
<script src="/dist/vue-social-sharing.min.js"></script>

Using the social sharing component

 <social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network>
      <network network="googleplus">
        <i class="fa fa-google-plus"></i> Google +
      </network>
      <network network="line">
        <i class="fa fa-line"></i> Line
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="odnoklassniki">
        <i class="fa fa-odnoklassniki"></i> Odnoklassniki
      </network>
      <network network="pinterest">
        <i class="fa fa-pinterest"></i> Pinterest
      </network>
      <network network="reddit">
        <i class="fa fa-reddit"></i> Reddit
      </network>
      <network network="skype">
        <i class="fa fa-skype"></i> Skype
      </network>
      <network network="sms">
        <i class="fa fa-commenting-o"></i> SMS
      </network>
      <network network="telegram">
        <i class="fa fa-telegram"></i> Telegram
      </network>
      <network network="twitter">
        <i class="fa fa-twitter"></i> Twitter
      </network>
      <network network="vk">
        <i class="fa fa-vk"></i> VKontakte
      </network>
      <network network="weibo">
        <i class="fa fa-weibo"></i> Weibo
      </network> 
      <network network="whatsapp">
        <i class="fa fa-whatsapp"></i> Whatsapp
      </network>
  </div>
</social-sharing>
Available properties

List of available props to use in the component:

PropData TypeDefaultDescription
urlStringcurrentURL to share.
titleStringSharing title (when available).
descriptionStringSharing description (when available).
quoteStringFacebook quote (Facebook only).
hashtagsStringA list of comma-separated hashtags (Twitter and Facebook).
twitter-userStringTwitter user (Twitter only).
mediaStringUrl to a media (Pinterest only).
network-tagString"span"Tag the network component should render.
Facebook only accept one hashtag. If you define multiple hashtags, only the first one will be passed to facebook
Available events

Events are emitted on the vue $root instance:

NameDataDescription
social_shares_openNetwork object, shared urlFired when a sharing popup is open
social_shares_changeNetwork object, shared urlFired when the user open a new sharing popup while another is already open
social_shares_closeNetwork object, shared urlFired when a sharing popup is closed or changed by another popup

You can listen to a vue-social-sharing $root event by using the following code:

Vue.$root.$on('social_shares_open', function (network, url) {
  // your event code
});

And on the Local Vue-social-sharing instance:

NameDataDescription
openNetwork object, shared urlFired when a sharing popup is open
changeNetwork object, shared urlFired when the user open a new sharing popup while another is already open
closeNetwork object, shared urlFired when a sharing popup is closed or changed by another popup

You can listen to a vue-social-sharing local event by using the following code:

<some-component>
    <social-sharing @open="open()" @change="change()" @close="close()">
    </social-sharing>
</some-component>

Note that the social_shares_close event is not fired for the Whatsapp, SMS and Email sharers.

Extending the network list

Since version 2.3.1 you can extend and override the list of available networks by passing the additional networks as attribute. You can see a working example of the feature in the examples/vue2-example.html file:

<social-sharing :networks="overriddenNetworks" inline-template>
    <div>
        <network network="custom">
            Custom network
        </network>
    </div>
</social-sharing>

<script>
    ...
    
    new Vue({
      data: {
        overriddenNetworks: {
          "custom": {
            "sharer": "https://mycustomdomain.com",
            "type": "popup"
          },
        }
      }
    });
</script>

There are two available network types:

TypeEffect
popupOpen the sharing link in a new popup
directOpen directly the sharing link (suitable for mobile apps sharing, emails, sms, ...)

Feature request

Feel free to open an issue to ask for a new social network support.

Changelog

Details changes for each release are documented in the CHANGELOG.md.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Keywords

FAQs

Package last updated on 22 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc